<template>
  <a-modal
    v-model:visible="visible"
    :title="formState.id ? '修改字典标签' : '新增字典标签'"
    :width="700"
    centered
    @ok="onSave"
    @cancel="cancel"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="{ style: 'width: 100px' }"
    >
      <a-form-item label="字典名称" name="dictName">
        <!-- <a-input v-model:value="formState.dictName" placeholder="请输入" disabled></a-input> -->
        <div>{{ formState.dictName }}</div>
      </a-form-item>
      <a-form-item label="字典类型" name="dictType">
        <!-- <a-input v-model:value="formState.dictType" placeholder="请输入" disabled></a-input> -->
        <div>{{ formState.dictType }}</div>
      </a-form-item>
      <a-form-item label="字典标签" required name="dictLabel">
        <a-input
          v-model:value="formState.dictLabel"
          placeholder="请输入"
          :maxlength="128"
        ></a-input>
      </a-form-item>
      <a-form-item label="字典值" required name="dictValue">
        <a-input
          v-model:value="formState.dictValue"
          placeholder="请输入"
          :maxlength="128"
        ></a-input>
      </a-form-item>
      <!-- <a-form-item label="字典样式类型">
        <a-space direction="vertical">
          <a-radio-group v-model:value="styleType" :options="styleTypeList" @change="formState.itemStyle = ''" />
        </a-space>
      </a-form-item>
      <a-form-item label="字典样式" name="itemStyle">
        <template v-if="styleType == 1">
          <a-input
            v-model:value="formState.itemStyle"
            type="color"
            onpaste="return true"
            placeholder="请输入"
            style="width: 50px"
          ></a-input>
          <span class="ml-10">{{ formState.itemStyle }}</span>
        </template>
        <template v-else>
          <a-select
            v-model:value="formState.itemStyle"
            style="width: 100%"
            placeholder="请选择"
            :options="customStyleList"
          ></a-select>
        </template>
      </a-form-item>
      <a-form-item label="排序" required name="itemSort">
        <a-input-number v-model:value="formState.itemSort" placeholder="请输入" style="width: 100%"></a-input-number>
      </a-form-item> -->
      <a-form-item label="字典状态" name="status">
        <a-radio-group v-model:value="formState.status" name="radioGroup">
          <a-radio
            v-for="(item, index) in dictStatusOptions"
            :key="index"
            :value="item.value"
            >{{ item.label }}</a-radio
          >
        </a-radio-group>
      </a-form-item>
      <a-form-item label="备注：" name="remark">
        <a-textarea
          v-model:value="formState.remark"
          :maxlength="100"
          show-count
          placeholder="请输入"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
// api
import {
  postDictDataAdd,
  postDictDataUpdate,
  postDictDataDetail,
} from "@/api/system";

import { dictStatusOptions } from "@/views/constant";
import { message } from "ant-design-vue";
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["ok"]);
const visible = ref(false);
const formRef = ref(null);
const rules = {
  dictLabel: [{ required: true, message: "请输入字典标签" }],
  dictValue: [{ required: true, message: "请输入字典值" }],
  itemSort: [{ required: true, message: "请输入排序" }],
};
const styleType = ref("1");
const styleTypeList = [
  { label: "自定义", value: "1" },
  { label: "选择", value: "2" },
];
const customStyleList = [
  {
    value: "orange",
    label: "orange",
  },
  {
    value: "red",
    label: "red",
  },
  {
    value: "default",
    label: "default",
  },
  {
    value: "green",
    label: "green",
  },
];

const formStateClone = reactive({
  id: "",
  dictName: undefined,
  dictType: undefined,
  dictLabel: undefined,
  dictValue: undefined,
  itemStyle: undefined,
  itemSort: 0,
  status: 0,
  remark: undefined,
  createdUserName: undefined,
  gmtCreate: undefined,
});
watch(
  () => formStateClone.itemStyle,
  () => {
    const list = customStyleList.map((item) => item.value);
    styleType.value = list.includes(formStateClone.itemStyle) ? "2" : "1";
  },
  { immediate: true, deep: true }
);

const formState = reactive(Object.assign({}, formStateClone));

const onSave = () => {
  formRef.value
    .validate()
    .then(() => {
      const reques = formState.id ? postDictDataUpdate : postDictDataAdd;
      reques(formState).then(() => {
        message.success(formState.id ? "修改成功" : "新增成功");
        formRef.value.resetFields();
        visible.value = false;
        emit("ok");
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const cancel = () => {
  formRef.value.resetFields();
};

watch(
  () => visible.value,
  async () => {
    if (visible.value) {
      // if (props.data.id) {
      //   const res = await postDictDataDetail({ id: props.data.id });
      //   Object.keys(formState).forEach(key => {
      //     formState[key] = res.data[key];
      //   });
      // } else {
      //   Object.assign(formStateClone, props.data);
      //   Object.keys(formStateClone).forEach(key => {
      //     formState[key] = formStateClone[key];
      //   });
      // }
      Object.assign(formStateClone, props.data);
      Object.keys(formStateClone).forEach((key) => {
        formState[key] = formStateClone[key];
      });
      const list = customStyleList.map((item) => item.value);
      styleType.value = list.includes(formState.itemStyle) ? "2" : "1";
    }
  }
);
defineExpose({
  visible,
});
</script>

<style scoped lang="less"></style>
